import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutterapp/widgets/CustomListItem.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Center(
          child: Container(
        decoration: BoxDecoration(
            image: const DecorationImage(
                image: AssetImage('assets/images/home.png'), fit: BoxFit.fill)),
        child: Container(
          margin: EdgeInsets.only(left: 20, right: 20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              SizedBox(height: 250),
              Text('Where do you want to go?',
                  style: TextStyle(color: Colors.white, fontSize: 25)),
              Card(
                margin: EdgeInsets.only(top: 20, bottom: 20),
                color: Colors.blueAccent,
                elevation: 20.0,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(20.0)),
                ),
                clipBehavior: Clip.antiAlias,
                semanticContainer: false,
                child: Container(
                  color: Colors.white,
                  alignment: Alignment.center,
                  child: Column(
                    children: <Widget>[
                      SizedBox(
                          child: Row(
                              children: <Widget>[
                                Expanded(
                                  child: Container(
                                      height: 50.0,
                                      margin: EdgeInsets.all(20),
                                      child: TextFormField(
                                        decoration: InputDecoration(
                                            contentPadding: const EdgeInsets.symmetric(vertical: 20.0),
                                            filled: true,
                                            prefixIcon: Icon(Icons.flight_takeoff),
                                            fillColor: Colors.transparent,
                                            border: OutlineInputBorder(
                                                borderRadius: BorderRadius.circular(30),
                                                borderSide: BorderSide()),
                                            hintText: 'Name, Country'),
                                        style: TextStyle(textBaseline: TextBaseline.alphabetic),
                                        keyboardType: TextInputType.text,
                                      )),
                                )
                              ],
                      )),
                      Text('Date'),
                      SizedBox(height: 10),
                      Text('12/12/2020 - 24/12/2020',
                          style: TextStyle(fontSize: 15)),
                      SizedBox(
                          child: Row(
                        children: <Widget>[
                          Expanded(
                            child: Container(
                                height: 50.0,
                                margin: EdgeInsets.all(20),
                                child: RaisedButton(
                                  shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(25)),
                                  color: Color.fromARGB(255, 58, 125, 148),
                                  child: new Text(
                                    "Start My Travel Plan",
                                    style: new TextStyle(
                                      fontSize: 18.0,
                                      color: Colors.white,
                                    ),
                                  ),
                                  onPressed: () {},
                                )),
                          )
                        ],
                      ))
                    ],
                  ),
                ),
              ),
              Text('Popular Tourist Attraction',
                  style: TextStyle(fontSize: 18)),
              Container(
                height: 100,
                margin: EdgeInsets.only(top: 20, bottom: 20),
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Image.network(
                              "https://free.modao.cc/uploads4/images/4511/45115493/v2_q6g24h.jpg",
                              fit: BoxFit.contain),
                        )),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Image.network(
                              "https://free.modao.cc/uploads4/images/4511/45115403/v2_q6g1z6.jpg",
                              fit: BoxFit.contain),
                        )),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115492/v2_q6g24h.jpg",
                                fit: BoxFit.contain))),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115493/v2_q6g24h.jpg",
                                fit: BoxFit.contain))),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115403/v2_q6g1z6.jpg",
                                fit: BoxFit.contain))),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115493/v2_q6g24h.jpg",
                                fit: BoxFit.contain))),
                  ],
                ),
              ),
              Text('Popular Tourist Countries', style: TextStyle(fontSize: 18)),
              Container(
                height: 100,
                margin: EdgeInsets.only(top: 20, bottom: 20),
                child: ListView(
                  scrollDirection: Axis.horizontal,
                  children: <Widget>[
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Image.network(
                              "https://free.modao.cc/uploads4/images/4511/45115493/v2_q6g24h.jpg",
                              fit: BoxFit.contain),
                        )),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(10),
                          child: Image.network(
                              "https://free.modao.cc/uploads4/images/4511/45115403/v2_q6g1z6.jpg",
                              fit: BoxFit.contain),
                        )),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115492/v2_q6g24h.jpg",
                                fit: BoxFit.contain))),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115493/v2_q6g24h.jpg",
                                fit: BoxFit.contain))),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115403/v2_q6g1z6.jpg",
                                fit: BoxFit.contain))),
                    Container(
                        margin: EdgeInsets.only(right: 20),
                        child: ClipRRect(
                            borderRadius: BorderRadius.circular(10),
                            child: Image.network(
                                "https://free.modao.cc/uploads4/images/4511/45115493/v2_q6g24h.jpg",
                                fit: BoxFit.contain))),
                  ],
                ),
              ),
              Text('My Travel Packing', style: TextStyle(fontSize: 18)),
              Container(
                constraints: BoxConstraints(minHeight: 200.0),
                child: ListView(
                  shrinkWrap: true,
                  children: <Widget>[
                    CustomListItem(
                      thumbnail: Image.network(
                          "https://free.modao.cc/uploads4/images/4511/45115767/v2_q6g2pb.jpg",
                          fit: BoxFit.fill),
                      title: 'Huawaii',
                      subtitle: 'USA',
                      author: 'Dash',
                      publishDate: 'Dec 28',
                      readDuration: '5 mins',
                    ),
                    CustomListItem(
                      thumbnail: Image.network(
                          "https://free.modao.cc/uploads4/images/4511/45115768/v2_q6g2pb.jpg",
                          fit: BoxFit.fill),
                      title: 'Paris',
                      subtitle: 'France',
                      author: 'Dash',
                      publishDate: 'Dec 28',
                      readDuration: '5 mins',
                    ),
                    CustomListItem(
                      thumbnail: Image.network(
                          "https://free.modao.cc/uploads4/images/4511/45115766/v2_q6g2pb.jpg",
                          fit: BoxFit.fill),
                      title: 'Paris',
                      subtitle: 'France',
                      author: 'Dash',
                      publishDate: 'Dec 28',
                      readDuration: '5 mins',
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      )),
    ));
  }
}
